<template>
  <div class="content" style="background-color: #f5f5f5;">
    <headers></headers>
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%" class="banner"></p>
    <div class="title" style="box-shadow: 5px 1px 10px #ccc;">
      <div class="auto">首页  >  认证考试</div>
    </div>
    <div class="auto padding250">
      <div class="top">
        <div class="left">
          <p class="label">参加认证考试   获取资格证书</p>
          <p class="text">赶快参加认证考试，获取由国家开发大学不动产管理学院颁发，符合中国物业行业协会标准的技能等级证书。</p>
          <a href="javascript:;" @click="skipExamination">考试报名</a>
        </div>
        <img src="../../assets/baokao.png" alt="" class="bg">
      </div>
      <div class="top" v-html="serviceDetail" v-show="loading">
        {{serviceDetail}}
      </div>
    </div>
    <footers></footers>
    <loginmodal  ref="loginB"></loginmodal>
  </div>
</template>

<script type="text/ecmascript-6">
  import {sliderPC, getHtmlWeb, centreInfoWeb} from "../../http";
  import {getStore} from '../../storage';
  import loginmodal from '../template/loginmodal'
  import headers from '../template/header'
  import footers from '../template/footer'
    export default {
        name: 'examination',
        props: {},
        data() {
            return {
              serviceDetail: {},
              sliderImg: '',
              loading: false
            };
        },
        methods: {
          getExaminationdetail(){
              //获取封面图
              sliderPC({sliderType:'11'}).then(res =>{
                this.sliderImg = res.data.slider.sliderImg;
                console.info(res)
              })
              getHtmlWeb({type:'jndjrzksjs'}).then(res => {
                this.serviceDetail = res.data.html.htmlContent;
                this.loading = true
              })
          },
          skipExamination(){
            centreInfoWeb().then(res => {
              if(res.code === 200){
                this.$router.push({
                  name: 'startkaoshi'
                })
              }else{
                this.$refs.loginB.showModal();
                this.$router.push({name:'kaoshi'});
              }
            })
          }
        },
        created() {
          let token = getStore('token');
          console.info(token)
          this.getExaminationdetail()
        },
        components: {
          headers,
          footers,
          loginmodal
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .banner{
    display: block;
  }
  .title{
    font-size: 14px;
    color: #B2936B;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    text-align: left;
  }
  .top{
    background-color: #fff;
    padding: 30px;
    margin:30px 0;
    text-align: left;
    position: relative;
    .titles{
      font-size: 22px;
      color: #333;
    }
    .imgs{
      padding: 30px 70px;
      .middle{
        margin: 0 40px;
      }
    }

    .bg{
      position: absolute;
      bottom: 0;
      right: 30px;
    }
    .left{
      width: 590px;
    }
    .label{
      font-size: 22px;
      color: #000;
      font-weight: 700;
    }
    .text,.text1{
      font-size: 14px;
      color: #999;
      line-height: 25px;
      margin: 20px 0;
    }
    .text1{
      color: #666;
    }
    a{
      background-color: #B2936B;
      color: #fff;
      display: inline-block;
      width: 150px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 5px;
      font-size: 18px;


    }
  }
</style>
